<template>
  <div class="Content">
    <table id="table">
        <tr class="title-info">
          <td class="other"></td>
          <td class="title">音乐标题</td>
          <td class="top"><slot name="top_title"></slot></td>
          <td class="singer">歌手</td>
          <td class="album">专辑</td>
          <td class="time">时长</td>
          <td class="hot"><slot name="hot_title"></slot></td>
        </tr>
      <tr
        class="detail-info"
        :class="{ active: currentIndex === index }"
        v-for="(item, index) in songMsg"
        :key="index"
        @dblclick="addSong(index)"
        @click="trClick(index)"
      >
        <td class="other">
          <span>{{ index < 9 ? "0" + (index + 1) : index + 1 }}</span>
          <img
            @click="btnClick(index)"
            v-show="spanIndex.indexOf(index) === -1"
            src="~@/assets/img/songlistdetail/collect2.svg"
            alt=""
          />
          <img
            @click="btnClick(index)"
            v-show="spanIndex.indexOf(index) !== -1"
            src="~@/assets/img/songlistdetail/collect3.svg"
            alt=""
          />
          <img src="~@/assets/img/songlistdetail/download2.svg" alt="" />
        </td>
        <td class="title"
            :class="{dbActive: $store.state.playContent.playId === item.id}">
          {{ item.name }}
        </td>
        <td class="top"><slot name="top_item"></slot></td>
        <td class="singer">{{ item.ar[0].name }}</td>
        <td class="album">{{ item.al.name }}</td>
        <td class="time">{{item.dt | filterTime}}</td>
        <td class="hot"><slot name="hot_item"></slot></td>
      </tr>
    </table>
  </div>
</template>

<script>
import { home } from "@/network/home";
import { format } from '@/components/common/utilis'

export default {
  name: "SonglistDetailContent",
  props: {
    songsIds: {
      type: String,
      default() {
        return "";
      },
    },
  },
  data() {
    return {
      songMsg: [], //歌曲信息
      spanIndex: [], //保存歌曲的索引
      currentIndex: "",
      // currentIndex2: "",
      songlist:[],//‘播放全部’歌单列表
      ids:'',     //辅助的数据（与传进来的songsIds有关）
    };
  },
  computed: {},
  created() {
    //传送过来的'播放全部'事件
    this.$bus.$on('playAll', () => {
      this.songMsg.forEach(item => {
        const songContent = {};
        songContent.playId = item.id;
        songContent.playImg = item.al.picUrl;
        songContent.playName = item.name;
        songContent.player = item.ar[0].name;
        // songContent.isPlay = true
        this.songlist.push(songContent)
      })
      this.$store.commit('playAll', this.songlist)
    })

  },
  mounted() {
  },
  watch: {

    //！！重要
    //！！重要
    //！！重要
    //监听传进来的songsIds,发生变化的话立马用ids接收，并进行网络请求渲染歌单列表
    songsIds(newVal, oldVal){
      this.ids = newVal
      newVal&&this.getSongs(this.ids);
    },


    //监听路由切换
    // $route(to, from) {
    //   console.log("监听路由切换");
    //   this.getSongs(this.songsIds);
    // },


    //点击列表弹窗里的歌曲相应改变content的歌名颜色为红
    //已更改判断（不再用currentIndex2来判断，已用$store.state.playContent.playId === item.id）
    // '$store.state.playContent.playId'(){
    //   this.songMsg.forEach((item, index) => {
    //     if(item.id === this.$store.state.playContent.playId){
    //       this.currentIndex2 = index
    //       return
    //     }else this.currentIndex2 = ''
    //   })
    // }

  },
  filters:{
    // 格式化歌曲时间
    filterTime(value){
      return format(value/1000)
    }
  },
  beforeDestroy() {
    //关闭事件总线，不然会多次触发事件，这里会发送多次”播放全部“的事件，
    //可能一个歌单只有60首歌，但是不关闭的话会把之前歌单的歌也加进去，最终播放列表大于60首歌
    this.$bus.off('playAll')
  },
  methods: {
    //获取歌曲信息的方法
    getSongs(a) {
      home.getSongs(a).then((res) => {
        this.songMsg = res.data.songs;
      });
    },
    //点击按钮收藏歌曲，再点击取消收藏，可以多个同时点击的方法
    btnClick(index) {
      let result = this.spanIndex.indexOf(index);
      if (result === -1) {
        this.spanIndex.push(index);
      } else this.spanIndex.splice(result, 1);
    },
    //点击tr改变背景颜色的方法
    trClick(index) {
      this.currentIndex = index;
    },
    //双击添加歌曲信息的方法
    addSong(index) {
      this.currentIndex2 = index
      const songContent = {};
      songContent.playId = this.songMsg[index].id;
      songContent.playImg = this.songMsg[index].al.picUrl;
      songContent.playName = this.songMsg[index].name;
      songContent.player = this.songMsg[index].ar[0].name;
      // footer里的组件要是监听到添加了a属性会做出响应
      songContent.a = ''
      this.$store.commit("addSongs", songContent);
    },
  },
};
</script>

<style scoped>
table {
  font-size: 13px;
}
table tr:nth-child(even) {
  background-color: #f9f9f9;
}
tr td {
  display: inline-block;
  line-height: 35px;
  color: #2a2727;
  white-space: nowrap; /*超出的空白区域不换行*/
  overflow: hidden; /*超出隐藏*/
  text-overflow: ellipsis; /*文本超出显示省略号*/
}
table tr:hover {
  background-color: #f0f1f2;
}
.title-info td {
  font-size: 14px;
  color: #959090;
}
.other {
  padding: 0 10px;
  width: 100px;
  color: #959090;
}
.other img {
  position: relative;
  top: 5px;
  width: 18px;
  height: 18px;
  cursor: pointer;
  margin-left: 6px;
}
.detail-info td{
  color: #8b7d7d;
}
.detail-info .title{
  color: #363333;
}
.title {
  width: 380px;
  white-space: nowrap; /*超出的空白区域不换行*/
  overflow: hidden; /*超出隐藏*/
  text-overflow: ellipsis; /*文本超出显示省略号*/
}
.top {
  width: 70px;
}
.hot {
  width: 90px;
}
.singer {
  width: 160px;
}
.album {
  width: 240px;
}
.time {
  padding: 0 10px;
  width: 80px;
}
/*此处用个id选择器，因为有可能因为权重问题让这个样式被覆盖*/
#table .active {
  background-color: #e5e5e5;
}
#table .dbActive{
  color: #f14465;
}
</style>
